<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="600px">
		<el-form :model="form" label-width="auto">
			<el-row :gutter="10" class="mb20">
				<el-col>
					<el-form-item label="导入文件">
						<el-upload
							ref="formRef"
							:limit="1"
							accept=".xlsx, .xls"
							:headers="headers"
							:action="importUrl"
							:disabled="isUploading"
							:data="form"
							:on-progress="onFileUploadProgress"
							:on-success="onFileSuccess"
							:auto-upload="false"
							drag
						>
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">
								将文件拖到此处，或
								<em>点击上传</em>
							</div>
							<template #tip>
								<div class="el-upload__tip" style="color: red">
									提示：仅允许导入“xls”或“xlsx”格式文件！<el-link @click="DownloadTemplate" type="primary">下载模板</el-link>
								</div>
							</template>
						</el-upload>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col>
					<el-form-item label="操作密码" prop="password">
						<el-input v-model="form.password" :type="isShowPassword ? 'text' : 'password'" placeholder="请输入操作密码">
							<template #suffix>
								<i
									class="iconfont el-input__icon login-content-password"
									:class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
									@click="isShowPassword = !isShowPassword"
								>
								</i>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm">确定</el-button>
				<el-button @click="onCancel">取消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';

import { Session } from '/@/utils/storage';
import { handleDownloadByName } from '/@/utils/utils';

export default {
	setup() {
		const state = reactive({
			title: '批量发放优惠券导入',
			open: false,
			importUrl: `${import.meta.env.VITE_API_URL}/admin/coupon_import`,
			form: {} as any,
			headers: {
				token: Session.get('token'),
			},
			isUploading: false, // 是否禁用上传
			submitLoading: false,
			isShowPassword: false,
		});

		const formRef = ref(null);
		let callback: Function = () => {};

		/********** 点击事件(on开头) **********/
		// 下载模板
		const DownloadTemplate = () => {
			handleDownloadByName(import.meta.env.VITE_FILE_API + '/hbsk_cloud/material/优惠券发放.xlsx', '批量充值模板', false);
		};
		// 文件上传中处理
		const onFileUploadProgress = () => {
			state.isUploading = true;
		};
		// 文件上传成功处理
		const onFileSuccess = (res: any) => {
			console.log('res', res);
			state.isUploading = false;
			(formRef.value as any)?.clearFiles();
			res.msg !== '导入成功' ? ElMessage.error(res.msg) : ElMessage.success('操作成功');
			onCancel();
			callback();
		};
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.submit();
			onCancel();
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
		};

		/********** 方法事件 **********/
		// 打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);

			callback = fn;
			state.open = true;
			state.form = {
				password: '',
				coupon_id: config.row.id,
			};
		};

		return {
			formRef,
			onFileUploadProgress,
			onFileSuccess,
			onSubmitForm,
			DownloadTemplate,
			openDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
